<template>
	<view>
		<view class="wxtip" id="JweixinTip" v-if="isShare" @click="noShare()">
		    <image :src="switchShare()" style="width:60px;height:60px;position:fixed;top:5px;right:20px;" />
		    <view class="wxtip-txt">点击右上角<br/>选择分享好友</view>
		</view>
		<view style="height: 10rpx;background-color: #e6e6e6;"></view>
		<view class="list-t-wrap">
		    <view id="refreshContainer" class="mui-content mui-scroll-wrapper">
		        <view class="mui-scroll">
		            <view class="zhuanchang-box">
		                <view class="zhuanchang-head">
		                    <view class="logo">
								<image :src="swichLogo()" id="logo">
							</view>
		                    <view class="brand-box">
		                        <view class="brand-name">
									{{ppName}}
									<span class="zhiying" style="font-size: 9px;padding: 3px 5px;">直营</span>
								</view>
		                        <view style="display: flex;margin-top: 10px;">
		                            <view @click="jieshao()" id="jieshao" class="pinpaijieshao">介绍</view>
		                            <view @click="zhengzhao()" id="zhengzhao" class="pinpaijieshao">证照</view>
		                            <view @click="gonggao()" id="gonggao" class="pinpaijieshao">公告</view>
		                        </view>
		                    </view>
		                    <view style="font-size: 12px;">
		                        <view id="pinpaiRuguBtn" style="margin-bottom: 5px;background-color: #ff3333;color: white;font-size: 9px;padding: 3px 5px;border-radius: 5px;" @click="rugu()">品牌入股</view>
		                        <view id="jili" @click="jiangli()" style="background-color: #ff3333;color: white;font-size: 9px;padding: 3px 5px;border-radius: 5px;">个人奖励</view>
		                    </view>
		                </view>
		            </view>
					<view class="header">
						<view class="pinpais" :class="{'erjiactive':n==-1?true:false}" @click="chaPinpaiGoods('',-1)">
							<view class="yihang active">全部</view>
						</view>
						<view class="fenlei-box" v-for="(item,i) in goodsTypes" @click="chaPinpaiGoods(item.id,i)" :class="{'erjiactive':i==n?true:false}">
							<view class="yihang">{{item.name}}</view>
						</view>
					</view>
					<!-- 所有商品分页显示 -->
					<view class="good-box" v-if="goods.length>0">
						<view class="goods-item" v-for="(item,i) in goods" :key="item.gid">
							<image :src="switchImg(item.gimages)" class="goods-img" @click="goDetail(item.gid)"></image>
							<view class="fgx">
								<view style="display: flex;justify-content: space-between;">
									<view @click="goDetail(item.gid)">
										<view class="goods-miaoshu" style="color: #000000;">{{item.gname}}</view>
										<view class="small-container">
											<text class="qian">{{item.gprice}}</text>
										</view>
									</view>
									<view class="rightbox" v-if="item.investmentStatus==1" @click="goodsrugu(item.gid)">
										<image src="../../static/center/gudong.png" class="gudong" />
										<p class="wenzi">入股</p>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="tips-text">{{tips}}</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gsId:'',		//品牌公司ID
				ppid:'',		//品牌ID
				page:1,			//页数
				gsId:'',		//公司ID
				ppName:'',		//品牌名称
				ppLogo:'',		//品牌logo
				ppStatus:'',	//品牌状态
				goodsTypes:[],	//商品类型集合
				m:'',			//选中的商品类型ID
				n:-1,			//选中的商品类型下标(-1为全部)
				goods:[],		//商品集合
				tips:"上拉加载更多数据",
				logined:true,	//判断用户是否登录
				isShare:false,	//是否点击分享了
				tjr:'',			//推荐人ID
				
				investmentStatus:0,	//投资状态
			}
		},
		//上拉加载
		onReachBottom() {
			if(this.tips=='上拉加载更多数据'){
				this.page++;
				this.chaPinpaiGoods(this.m,this.n);
			}
		},
		//分享给好友
		onShareAppMessage() {
			return {
				title: '品牌共享：'+this.ppName,
				imageUrl:this.ppLogo,
				path: 'pages_pinpai/pinpai/pinpaiDetail?ppid='+this.ppid+'&tjr='+uni.getStorageSync('usersId')+'&isShare=true',
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: '品牌共享：'+this.ppName,
				imageUrl:this.ppLogo,
				path: 'pages_pinpai/pinpai/pinpaiDetail?ppid='+this.ppid+'&tjr='+uni.getStorageSync('usersId')+'&isShare=true',
			};
		},
		//初始化数据
		onLoad(opt) {
			if(opt.isShare){//点击分享链接
				if(uni.getStorageSync('logined')){//已登录
					let userid = uni.getStorageSync('usersId');
					if(opt.tjr!=userid && opt.tjr!='0'){
						this.$http.get('/ppUserPingpai/share',{
							ppid:this.ppid,
							userid:userid,
							tjr:opt.tjr
						}).then(res => {
							if(res.data.code==200){
								this.$u.toast("品牌关注成功")
							}else{
								this.$u.toast(res.data.msg);
							}
						})
					}
				}else{//未登录
					this.$u.toast("请先登录")
					setTimeout(() => {
						this.goLogin()
					},500)
				}
			}
			this.ppid = opt.ppid;
			this.chaPinpaiInfo();
			this.chaPinpaiGoods('',-1);
			this.chaPinpaiGoodsType();
		},
		methods: {
			//点分享链接未登录，跳登录界面
			goLogin(){
				uni.navigateTo({
					url:'../../pages/center/login'
				})
			},
			//点击分享弹出遮盖层
			switchShare(){
				return '../../static/center/weixin-tip.png'
			},
			//不分享
			noShare(){
				this.isShare = false
			},
			//监听自定义导航栏分享按钮
			// onNavigationBarButtonTap(e) { 
			//     console.log("点击分享了:"+this.ppid)
			// 	this.isShare = true
			// },
			//查询品牌名称和logo
			chaPinpaiInfo(){
				this.$http.get('/pppingpai/selectPinpaiById',{
					ppid: this.ppid
				}).then(res => {
					if(res.data.code==200){
						this.ppLogo = this.host+"/image/pingpaiLogo/"+res.data.data.logo;
						this.ppName = res.data.data.name;
						this.gsId = res.data.data.gsId;
						this.investmentStatus = res.data.data.investmentStatus;
					}
				})
			},
			//查询公司的商品类别
			chaPinpaiGoodsType(){
				this.$http.get('/pppingpai/selectLeibieBygs',{
					ppid: this.ppid
				}).then(res => {
					if(res.data.code==200){
						this.goodsTypes = res.data.data;
					}
				})
			},
			//查询该品牌所有商品
			chaPinpaiGoods(typeid,i){
				this.n = i;
				this.m = typeid;
				if(typeid!=null && typeid!="" && typeid!=undefined){
					this.page = 1;
				}
				this.$http.get('/ppGoodsType/selectGoodsByPinpai',{
					page:this.page,
					limit:10,
					pinpai: this.ppid,
					typeid:typeid
				}).then(res => {
					if(res.data.code==0){
						if(res.data.data.length>0){
							if(this.page>1){
								this.goods = this.goods.concat(res.data.data);
							}else{
								this.goods = res.data.data;
							}
							if(res.data.data.length<10){
								this.tips="";
							}
						}else{
							if(this.page==1){
								this.goods = []
							}
							this.tips="没有更多数据";
						}
						// console.log("商品",this.goods)
					}
				})
			},
			//处理图片
			swichLogo(){
				return this.ppLogo;
			},
			switchImg(images){
				return this.host+images;
			},
			//品牌入股
			rugu(){
				if(this.investmentStatus==0){
					this.$u.toast("该品牌暂不支持投资")
					return;
				}
				if(this.ppStatus==0){
					this.$u.toast("该品牌被禁用，暂不支持投资")
					return;
				}
				this.logined = uni.getStorageSync('logined')
				if(!this.logined){
					this.$u.toast("请先登录")
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}else{
					uni.navigateTo({
						url:'pinpaiRuguXieyi?ppid='+this.ppid
					})
				}
			},
			//产品入股
			goodsrugu(gid){
				this.logined = uni.getStorageSync('logined')
				if(!this.logined){
					this.$u.toast("请先登录")
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}else{
					uni.navigateTo({
						url:'../goods/goodsRuguXieyi?gid='+gid
					})
				}
			},
			//个人奖励
			jiangli(){
				this.logined = uni.getStorageSync('logined')
				if(!this.logined){
					this.$u.toast("请先登录")
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}else{
					this.$http.get('/pinpaishare/isrugu',{
						ppid: this.ppid,
						userid:uni.getStorageSync('usersId')
					}).then(res =>{
						if(res.data.msg=="不是品牌会员"){
							this.$u.toast("您还不是品牌会员")
						}else{
							uni.navigateTo({
								url:'gerenJiangli?ppid='+this.ppid
							})
						}
					})
				}
			},
			//跳转商品详情
			goDetail(gid){
				uni.navigateTo({
					url:'../goods/goodsDetail?gid='+gid
				})
			},
			//品牌公司介绍
			jieshao(){
				uni.navigateTo({
					url:'jieshao?gsId='+this.gsId
				})
			},
			//品牌公司证照
			zhengzhao(gid){
				uni.navigateTo({
					url:'zhengzhao?gsId='+this.gsId
				})
			},
			//品牌公司公告
			gonggao(gid){
				uni.navigateTo({
					url:'gonggao?gsId='+this.gsId
				})
			},
		}
	}
</script>

<style>
	.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998;}
	.wxtip-txt{margin-top: 107px; color: #fff; font-size: 20px; line-height: 1.5;}
	.good-box::after{
		content: '';
		width: 50%;
	}
	.brand-name{
		font-size: 17px;
	}
	.good-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.goods-item {
	    width: 47%;
	    margin: 5rpx auto;
	    background-color: white;
	    padding: 20rpx 5rpx;
		border-radius: 20rpx;
	}
	.goods-item .goods-img {
		height: 220px;
	    width: 86%;
	    display: block;
	    margin: auto;
	}
	.fgx {
	    border-top: 1px solid #ccc;
	    width: 80%;
	    margin: auto;
	    margin-top: 0.625rem;
		padding-top: 10rpx;
		text-align: center;
		font-weight: bold;
	}
	.qian::before {
	    content: '￥';
	    color: red;
	    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	}
	.goods-miaoshu{
		display:-webkit-box;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-line-clamp:1;
		-webkit-box-orient:vertical;
	}
	.small-container {
		margin-top: 10rpx;
	    display: flex;
		font-size: 14px;
		font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
		color: red;
	    justify-content: space-between;
		justify-content: center;
	}
	.tips-text{
		text-align: center;
	}
	.erjiactive{
		color: red;
		/* background-color: red; */
		/* padding: 0 6px 0 6px; */
		font-size: 15px;
		border-bottom: 2px solid red;
	}
	.yihang{
		font-size: 16px;
		padding: 0 6px 0 6px;
	}
	.header{
		background-color: white;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.header::after{
		content: '';
		width: 50%;
	}
	*{
		margin: 0px;
		padding: 0px;
	}
	html,body {
		height: 100%;
	}
	.pinpaijieshao{
		background-color: #ff3333;
		color: white;
		font-size: 10px;
		padding: 3px 5px;
		border-radius: 5px;
	}
	.list-t-wrap{
		position: relative;
		height: 100%;
	}
   #pinpais{
	   width: 100%;
	   color:red;
	   overflow: auto;
	   position: absolute;/* 测试*/
   }
   #pinpais li{
	   /*width: 70px;*/
	   margin-right: 15px;
	   padding-bottom: 2px;
	   list-style: none;
	   color: black;
	   font-size: 16px;
	   height: 25px;
	   float: left;/* 测试*/
   }
   #ulmain{
	   position: relative;
   }
	#goodsbox{
	   padding-top: 40px;/* 测试*/
		flex-wrap: wrap;
		overflow: visible;
		justify-content: space-between;
		/* display: flex; */
		/* padding: 5px; */
	}
	#goodsbox li{
		width: 48%;
		text-align: center;
	}
	#pinpais img{
		width: 50px;
		height: 60px;
	}
	#goodsbox .goodsimg{
		width: 90%;
		height: 220px;
	}
	#goodsbox .goodsitem{
		background-color:white;
		padding: 5px;
		border-radius: 5px;
		margin-bottom: 10px;
		padding-bottom: 0px;
	}
	.goodsprice{
		color: red;
	}
	.goodsprice::before{
		content: '￥';
	}
	.gudong{
		width: 20px;
		height: 20px;
	}
	.goodsitem view{
		display: flex;
		padding: 5px 5px;
		justify-content: space-between;
		border-top: 1px solid #ccc;
	}
	.goodsitem view .goodsname{
		color: #333333;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	   font-family: '微软雅黑';
	}
	.zhuanchang-box{
		background-color: white;
		padding-bottom: 3px;
	}
	#logo{
		width: 50px;
		height: 50px;
	}
	.zhuanchang-head{
		padding: 10px 0px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	#jieshao,#zhengzhao,.zhiying{
		/* color: black; */
		font-size: 10px;
		margin-right: 10px;
	}
	.brand-box{
		display: flex;
		flex-direction: column;
		padding-right: 90px;
	}
	.goodsitem .leftbox,.goodsitem .rightbox{
		display: flex;
		flex-direction: column;
		font-weight: bold;
		border-top: none;
		justify-content: center;
	}
	.wenzi{
		font-size: 10px;
		color: black;
	}
	.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}
	.wxtip-txt{margin-top: 107px; color: #fff; font-size: 20px; line-height: 1.5;}
	#pinpais li{
		font-size: 15px;
	}
	.mui-table-view.mui-grid-view{
		padding: 0px;
	}
	#pinpais .active{
		/* color: white; */
		color: red;
		font-size: 15px;
		border-bottom: 2px solid red;
	}
</style>
